---
title: Badge
description: Badges show notifications, counts, or status information on navigation items and icons.
docType: Demo
docGroup: Components
group: Presentation
components: [Badge, Button, SrOnly]
---

# Badge

Badges show notifications, counts, or status information on navigation items and
icons.

## Simple Badged Button

The most common use-case is to render a `Badge` in a `Button` to display a
number of notifications the user should view. The badge will default to the
top-right of the button.

```demo source="./SimpleBadgedButtonExample.tsx"

```

## Badge Themes

The `Badge` can be themed with the normal theme colors using the `theme` prop.

```demo source="./BadgeThemesExample.tsx"

```

## Badge Position

The `Badge` is positioned by using `position: absolute` within a
`position: relative` container and can be configured in a few ways:

1. Change the [$SASSDOC](badge-offset) variable which will apply to both `top`
   and `right`
2. Change the [$SASSDOC](badge-offset-top) and/or
   [$SASSDOC](badge-offset-right) to only change one value
3. Use the [$SASSDOC](badge-set-var) mixin to change the `offset` variable
   which will apply to both the `top` and `right`
4. Use the [$SASSDOC](badge-set-var) mixin to change the `offset-top` and/or
   `offset-right` variables which will only change one value

```demo source="./BadgePositionExample.tsx"

```
